<template>
	<view>
		<nav-header title="商友圈" custom-nav>
			<template v-slot:right>
				<view class="moments-top" @click="goToPublish">
					<img :src="getResource('/icon/camera-1.svg')" alt="" class="top-img" @click="goToPublish" />
				</view>
			</template>
		</nav-header>
		<view class="moments-bac">
			<!-- <img src="../../static/image/bj1.jpg" alt="" class="bac-img"> -->
			<!-- <view class="bac-img"></view> -->
			<image class="qun-bg" src="https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg"
				mode="scaleToFill"></image>
			<view class="user-info">
				<head-image class="img" :name="userInfo.nickName" :url="userInfo.headImageThumb"
					:size="100"></head-image>
				<text class="uname">{{ userInfo.nickName }}</text>
			</view>
		</view>
		<view class="moments-content">
			<view class="content" v-for="item in mList" :key="item.id">
				<view class="user-info">
					<head-image class="img" :name="userInfo.nickName" :url="userInfo.headImageThumb"
						:size="60"></head-image>
					<text class="uname">{{ userInfo.nickName }}</text>
				</view>
				<view class="publish">
					<view class="publish-text">
						{{ item.title }}
					</view>
					<view class="publish-img">
						<view v-for="it in item.imgList" :key="it">
							<img :src="it.pic" alt="" class="pimg">
						</view>
					</view>
					<view class="publish-loc">
						<text>{{ item.location }}</text>
					</view>
					<view class="publish-gn">
						<text class="gn-time">{{ item.time }}</text>
						<view class="gn-right">
							<view v-show="selectedUserId === item.id">
								<view class="good-list">
									<view class="good">
										<uni-icons type="heart" size="18" style="padding-left: 10rpx;"></uni-icons>
										<text>点赞
											| </text>
									</view>
									<view class="good">
										<uni-icons type="chatbubble" size="18"></uni-icons> <text>评论</text>
									</view>
								</view>
							</view>
							<uni-icons type="more-filled" size="28" @click="toggleActions(item.id)"></uni-icons>
						</view>
					</view>
					<view class="publish-dz">
						<uni-icons type="heart" size="18" color="#118dd0"></uni-icons>
						<view class="dz">
							<view v-for="it in item.dzList" :key="it.userId">
								{{ it }}
							</view>
						</view>
					</view>
					<view class="publish-pl">
						<view style="padding-top: 10rpx;">
							<uni-icons type="chatbubble" size="20" color="#118dd0"></uni-icons>
						</view>
						<view class="pl">
							<view v-for="it in item.plList" :key="it.userId" style="padding-top: 10rpx;">
								<text>{{ it.user }}</text>: <text class="pl-text">{{ it.text }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
			isShow: false,
			selectedUserId: null,
			mList: [],
			List: [
				{
					id: 1,
					title: "本人摄影师，寻求合作，有意者私信我噢！并附上几张美图",
					imgList: [{
						pic: this.getResource('/icon/pyq.svg')
					},
					{
						pic: this.getResource('/icon/pyq.svg')
					},
					{
						pic: this.getResource('/icon/pyq.svg')
					},
					{
						pic: this.getResource('/icon/pyq.svg')
					}
					],
					location: "广东省 · 东莞市大岭山镇金地格林",
					time: "2小时前",
					dzList: [
						{
							userId: 1,
							text: "小米-雷军"
						},
						{
							userId: 2,
							text: "小米-卢伟冰"
						},
						{
							userId: 3,
							text: "小米-张峰"
						},
						{
							userId: 4,
							text: "小米-王翔"
						},
						{
							userId: 5,
							text: "小米-何勇"
						}
					],
					plList: [
						{
							userId: 1,
							user: "小米-雷军",
							text: "可以噢好看的哈"
						},
						{
							userId: 2,
							user: "小米-卢伟冰",
							text: "小子不错，可以私信谈谈合作！"
						}
					]
				},
				{
					id: 2,
					title: "本人摄影师，寻求合作，有意者私信我噢！本人摄影师，寻求合作，有意者私信我噢！本人摄影师，寻求合作，有意者私信我噢！",
					location: "广东省 · 东莞市大岭山镇金地格林",
					time: "4小时前",
					dzList: [
						{
							userId: 3,
							text: "小米-张峰"
						}
					],
					plList: [
						{
							userId: 5,
							user: "小米-何勇",
							text: "价格怎么样？"
						}
					]
				}
			],
		}
	},
	methods: {
		loadUserInfo(id) {
			this.$http({
				url: "/user/find/" + id,
				method: 'GET'
			}).then((user) => {
				this.userInfo = user;
			})
		},
		toggleActions(Id) {
			if (this.selectedUserId === Id) {
				this.selectedUserId = null;
			} else {
				this.selectedUserId = Id;
			}
		},
		showGood() {
			this.isShow = !this.isShow
			console.log(this.isShow)
		},
		getData() {
			if (this.List.length > 0) {
				this.List.forEach(i => {
					let names = i.dzList.map(dzList => dzList.text)

					i.dzList = names.join("，")
				})
				console.log(this.List)
				this.mList = this.List
			}
		}
	},
	onLoad(options) {
		// 查询用户信息
		this.loadUserInfo(options.id);
		this.getData()
	}
}
</script>

<style lang="less" scoped>
.moments-top {
	width: 100%;
	display: flex;
	justify-content: flex-end;

	.top-img {
		padding: 20rpx 20rpx 10rpx 20rpx;
		width: 50rpx;
		height: 50rpx;
	}
}

.moments-bac {
	width: 100%;
	position: relative;

	.qun-bg {
		width: 100%;
		height: 200px;
	}

	.bac-img {
		width: 390px;
		height: 200px;
		background-color: #000;
	}

	.user-info {
		display: flex;
		align-items: center;
		position: absolute;
		padding: 40rpx;
		left: 0;
		bottom: -30px;

		.uname {
			margin-left: 20rpx;
			color: #fff;
			font-size: 40rpx;
		}
	}
}

.moments-content {
	width: 100%;

	.content {
		padding: 35rpx 20rpx;

		.user-info {
			display: flex;
			align-items: center;

			.uname {
				margin-left: 20rpx;
				color: #118dd0;
			}
		}

		.publish {
			padding-left: 85rpx;

			.publish-text {
				font-size: 30rpx;
			}

			.publish-img {
				display: flex;
				flex-wrap: wrap;

				.pimg {
					width: 190rpx;
					height: 190rpx;
					padding: 10rpx 20rpx 0 0;
				}
			}

			.publish-loc {
				font-size: 25rpx;
				color: #118dd0;
				padding-top: 10rpx;
			}

			.publish-gn {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.gn-time {
					font-size: 25rpx;
					color: #aaa;
				}

				.gn-right {
					display: flex;
					justify-content: flex-end;
					flex: 1;
				}

				.good-list {
					display: flex;
					align-items: center;
					padding: 0 10rpx;

					.good {
						display: flex;
						align-items: center;
						background-color: #d8d8d8;
						font-size: 25rpx;


						text {
							padding: 10rpx;
						}
					}
				}
			}

			.publish-dz {
				display: flex;
				border-bottom: 1px solid #eee;
				padding-bottom: 10rpx;

				.dz {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					font-size: 25rpx;
					color: #118dd0;
				}
			}

			.publish-pl {
				display: flex;

				.pl {
					font-size: 25rpx;
					color: #118dd0;

					.pl-text {
						color: #000;
					}
				}
			}
		}
	}
}
</style>